<template>
	<view class="content">
    <view class="rescue-logo">
      <image src="../../static/images/rescue-logo.png"></image>
    </view>
    
    <!-- 30.792238
app-service.js:55039 经度：103.885445 -->
		<view class="position-box-image" :style="{height:scrollerHeight}">
      <!-- <image :src="bgImageSrc" style="height: 100%;width: 100%;"></image> -->
     <!-- <map :latitude="30.792238" :longitude="103.885445" :scale="scale" 
      style="height: 100%;width: 100%;"
      :markers="covers"></map> -->
    </view>
    <!-- <view class="apply-first" @click.native="getMyLocation()">社区求助</view> -->
    <view class="apply-first">
           <!-- <button type='primary' 
              open-type="getPhoneNumber" 
              size="mini"
              @getphonenumber="getPhoneNumber">获取手机号
            </button> -->
            <u-button type="error" 
            open-type="getPhoneNumber"
            shape="circle"            
            @getphonenumber="getPhoneNumber"
            text="社区求助"></u-button>
    </view>
    <view class="apply-box">
      <view class="apply-second" @click.native="callSupport(servicePhone)" 
      style="background-color: skyblue;">
        <view class="apply-item">
          <image src="../../static/images/call.png" class="img-icon" mode="aspectFill"></image>
        </view>
        <view class="apply-item-text">呼叫支援</view>
        </view>
      <view class="apply-second" style="background-color: antiquewhite;">
      <view class="apply-item">
        <image src="../../static/images/导航.png" class="img-icon" mode="aspectFill"></image>
      </view>
      <view class="apply-item-text" @click.native="goMap()">迷路导航</view>
      </view>
      <!-- <view class="apply-forth">防狼手电筒</view> -->
      <!-- <view class="apply-fifth">视频求助</view> -->
    </view>
    <!-- 红十字会急救电话999，
    交通事故：12122，
    海事救援：12395，
    海上报警95110，
    全球领事保护应急呼叫12308，
    政府热线（市长热线）12345，
    妇女维权12338，
    免费法律热线12348，
    劳工保护12333，
    农村科技帮助12396，
    工会职工维权12351。 -->
    <view class="urgent-call-box">求助电话列表
      <view class="urgent-call-item" @click.native="callSupport(item.phone)" 
      v-for="(item,index) in phoneList" :key="index">
          <view>{{item.name}}</view> <view>{{item.phone}}</view>
        </view>
      <!-- <view class="urgent-call-item"><view>交警电话</view> <view>122</view></view>
      <view class="urgent-call-item"><view>紧急救援</view> <view>120</view></view> -->
    </view>
	</view>
</template>

<script>
  import WXBizDataCrypt from "../../data/WXBizDataCrypt.js";  
	export default {
		data() {
			return {
        //求救人员电话
        forHelpPhone:'',
        // appid:'wx91a4064af19e4310',
        // session_key:'fEsunoJ4ier3BMKGXgNw2Q==',
        appid:'',
        session_key:'',
        script:'',
        // 紧急电话列表
        phoneList:[
            {
              "phone": "120",
              "name": "紧急救援1"
            },
            {
              "phone": "119",
              "name": "火警电话"
            },
            {
              "phone": "122",
              "name": "交警电话"
            }
        ],
        // 地图
        latitude:'29.58832234563708',
        longitude:'106.56436432812498',
        covers: [
        ],  //标记点用于在地图上显示标记的位置
        controls: [{ //在地图上显示控件，控件不随着地图移动
        	id: 1, //控件id
        	iconPath: '../../static/images/location.png', //显示的图标    
        	position: { //控件在地图的位置
        		left: 15,
        		top: 15,
        		width: 50,
        		height: 50
        	},
        }],
        scale: 16, //地图缩放比例
        servicePhone:13541770202,
				bgImageSrc:`${this.$baseUrl}/image/download?name=position.png`,
        scale:8,
        // 求救的具体定位
        position:{
          // 定位的具体名称
          name:'成都工业学院',
          // 详细位置
          address:'四川省成都市郫都区中心大道二段一号',
          latitude:'30.792238',
          longitude:'103.885445',
        }
			}
		},
    onShow() {
      // console.log("111")
      },
    onLoad() {
      // this.getuserNew(); 
      this.getHomeLocation()
      this.getPhoneList()
      this.loginForPhone()
    },
		methods: {
      // 获取小区地址导航回家
      getPhoneList(){
        this.$request({
          url: `${this.$baseUrl}/users/phoneList`,
          method:'GET',
        }).then(res=>{
          // console.log(res.data)
          this.phoneList= res.data.data
        })
      },
      getHomeLocation(){
        this.$request({
          url: `${this.$baseUrl}/users/homeLocation`,
          method:'GET',
        }).then(res=>{
          // console.log(res.data.data)
          this.position = res.data.data
        })
      },
      goMap(){
        // console.log("进入地图")
        uni.openLocation({
          latitude:this.position.latitude,
          longitude: this.position.longitude,//经度
          name: this.position.name,
          address: this.position.address
        })
      },
      //寻求帮助
      async forHelp(){
        // console.log(this.position)
        this.$request({
          url: `${this.$baseUrl}/users/forHelp`,
          data:{
            phone:this.forHelpPhone,
            position:this.position
          },
          method:'POST'
        }).then(res=>{
          // console.log(res)
          if(res.data.status){
            uni.showToast({
              title: '管理员已收到，请原地等待支援',
              icon:'none'
            })
          }
          else{
            uni.showToast({
              title: res.data.msg,
              icon:'none'
            })
          }
        })
      },
      loginForPhone(){
        uni.login({
        	provider: 'weixin',
        	success: (res) =>
        		{
        			let params = {
        				url: `${this.$baseUrl}/weixin/login?code=${res.code}`,
        			};
        			this.$request(params).then(res => {
        				// uni.setStorageSync("user", res.data.data)
                // console.log(res.data.appid)
                // console.log(res.data)
                this.appid = res.data.data.appid
                this.session_key = res.data.data.session_key
                // console.log(this.appid)
                // console.log(this.session_key)
        			}).catch(res => {
        				console.log(res)
        			})
        		}
        })
      },
      // 获取用户手机号
      getPhoneNumber(e){	
      		console.log(e.detail.errMsg)      // 判断用户是否允许获取手机号
      		console.log(e.detail.iv)           // 参数 iv
      		console.log(e.detail.encryptedData) // 参数encryptedData
          console.log(this.appid)
          console.log(this.session_key)
      		if(e.detail.errMsg == "getPhoneNumber:ok"){// 用户允许或去手机号
          // let pc = new WXBizDataCrypt("wx91a4064af19e4310","fEsunoJ4ier3BMKGXgNw2Q==");
              let pc = new WXBizDataCrypt(this.appid,this.session_key);
      				let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);
      				console.log('解密后 data: ', data)
              this.forHelpPhone = data.phoneNumber
              this.getMyLocation()
              // this.forHelp()
      		}else{
            uni.showToast({
              title: '已取消授权',
              icon:'none'
            })
          }
      	},
      
      async getMyLocation(){
        // console.log("获取定位了")
        uni.chooseLocation({
        	success: function (res) {
            this.position=res
        		console.log('位置名称：' + res.name);
        		console.log('详细地址：' + res.address);
        		console.log('纬度：' + res.latitude);
        		console.log('经度：' + res.longitude);
            this.latitude=res.latitude
            this.longitude=res.longitude
            this.covers = [{
            	latitude: res.latitude,
            	longitude: res.longitude, 
            	iconPath: '../../static/images/location.png', //地图上的图标
            	width: 25, //宽
            	height: 25, //高
            	callout: { //自定义标记点上方的气泡窗口 点击有效  
            		content: res.address, //文本
            		color: '#ffffff', //文字颜色
            		fontSize: 14, //文本大小
            		borderRadius: 2, //边框圆角
            		bgColor: '#00c16f', //背景颜色
            		display: 'ALWAYS', //常显
            		padding:5  //气泡窗口的内间距
            	},
            }]
        	},
          fail(res) {
            // console.log("失败了")
            console.log(res)
          }
        });
      },
      
      // 紧急呼叫
      async callSupport(phone){
        // console.log("拨打电话",this.servicePhone)
        uni.makePhoneCall({
          phoneNumber:phone.toString()//this.servicePhone是你要拨打的电话号码
        });
      },             
		},
    computed: {
    	scrollerHeight: function() {
    		const sysInfo = uni.getSystemInfoSync()
    		return (sysInfo.windowHeight) + 'rpx';
    	},
    },
	}
</script>

<style lang="scss" scoped>
  .content{
    .rescue-logo{
      position: absolute;
      left: 68rpx;
      top: 224rpx;
      image{
        width: 614rpx;
        height: 128rpx;
        opacity: 1;
      }
    }
    
    
    position: relative;
    padding-bottom: 20%;
  }
  .urgent-call-box{
    margin: 20rpx auto;
    background-color: skyblue;
    border-radius: 20rpx;
    // border: 1px solid orangered;
    min-height: 80rpx;
    width: 80%;
    padding: 20rpx;
    .urgent-call-item{
      margin: 20rpx auto;
      height: 60rpx;
      width: 80%;
      line-height: 60rpx;
      background-color: #f56c6c;
      padding: 10rpx;
      border-radius: 20rpx;
      color: white;
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      view{
        margin: 5rpx auto;
      }
    }
  }
  .position-box-image{
    height: 60%;
    width: 100%;
    background-color: antiquewhite;
  }
  .apply-first{
    // background-color: #f56c6c;
    color: white;
    width: 30%;
    height: 100rpx;
    margin: 20rpx auto;
    line-height: 100rpx;
    text-align: center;
    font-size: 40rpx;
    border-radius: 50rpx;
  }
  .apply-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .apply-second{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 150rpx;
      .apply-item{
        // background-color: skyblue;
        height: 90%;
        width:30%;
        .img-icon{
          width: 100%;
          height:80%;
        }
      }
      .apply-item-text{
        // background-color: skyblue;
        height: 90%;
        width:40%;
      }
    }  
    view{
      width: 45%;
      height: 150rpx;
      line-height: 150rpx;
      margin: 10rpx 10rpx;
      border-radius: 10rpx;
      text-align: center;
      // background-color: antiquewhite;
    }
  }

</style>
